<template>
    <div>
        <!-- 搜索区域 -->
        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-input class="w-50 m-2" placeholder="请输入搜索关键词" prefix-icon="el-icon-search" size="medium">
                    <el-button type="info" size="medium" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="11">
            </el-col>
            <el-col :span="7">
                <el-button type="primary" size="small" @click="buffer.formBuffer = true">添加</el-button>
            </el-col>
        </el-row>
        <!-- 1.数据列表区域 -->
        <list-comp :roleList="roleList"></list-comp>
        <!-- 2.数据表单区域 -->
        <form-comp :buffer="buffer" :menuList="menuList" @channel="getRole"></form-comp>
    </div>
</template>

<script>
// 1.引入列表和表单组件
import listComp from "./components/list.vue"
import formComp from "./components/form.vue"
export default {
    components: {
        listComp,
        formComp
    },
    data() {
        return {
            menuList: [],//权限数据
            roleList: [],//角色数据
            buffer: {
                formBuffer: false
            }
        }
    },
    mounted() {
        // prmise.all()
        // 获取全部的权限菜单数据
        this.getMenus()
        // 获取全部角色数据
        this.getRole()
    },
    methods: {
        // 获取全部角色数据
        getRole() {
            this.$api.reqGetRole()
                .then(res => this.roleList = res)
                .catch(err => console.log(err))
        },
        // 获取全部的权限菜单数据
        getMenus() {
            this.$api.reqGetMenu({ istree: true })
                .then(res => this.menuList = res)
                .catch(err => console.log(err))
        }
    },
};
</script>

<style  lang="less" scoped>
.el-row {
    margin: 20px 0;
}
</style>

